<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户分组</title>
    <link rel="stylesheet" href="/businessProcessManager/js/ele/index.css">
    <link rel="stylesheet" href="/businessProcessManager/css/style.css">
</head>
<body>
<header>
    <img src="/businessProcessManager/images/logo.png" alt="">
    <span class="com-name">业务流程管理平台</span>
</header>
<div>
    <div class="side" id="side">
        <div id="menu" class="menu">
            <el-menu default-active="2" unique-opened class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>业务流程管理</template>
                    <a href="process.html"><el-menu-item index="1-1">流程管理</el-menu-item></a>
                    <a href="process-list.html"><el-menu-item index="1-1">流程定义</el-menu-item></a>
                    <a href="sortManager.html"><el-menu-item index="1-2">分类管理</el-menu-item></a>
                    <a href="monitor.html"><el-menu-item index="1-3">运行监控</el-menu-item></a>
                    <a href="task-entrust.html"><el-menu-item index="1-4">任务委托</el-menu-item></a>
                    <!--<a href="user-group.html"><el-menu-item index="1-5">用户分组</el-menu-item></a>
                    <a href="dataAllocation.html"><el-menu-item index="1-6">数据配置</el-menu-item></a>
                    <a href="exampleAllocation.html"><el-menu-item index="1-7">实例配置</el-menu-item></a>-->
                </el-submenu>
            </el-menu>

        </div>
    </div>
    <div class="main-wrapper main-group">
        <div class="nav-bar">
            <span class="position-info">您现在的位置：<a>公文管理</a> &gt; <span class="current-position">公文会签</span></span>
        </div>
        <div class="content-wrapper group-content-wrapper relative">
            <div id="tree" class="tree-wrapper">
                <el-tree
                        :data="treeDatas"
                        node-key="id"
                        ref="tree"
                        highlight-current
                        lazy
                        :expand-on-click-node="false"
                        :load="loadNode"
                        @node-click="getKey"
                        :props="defaultProps">
                </el-tree>
                </div>
            <div id="group" class="group-table-wrapper">
                <div class="center">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="用户分组" name="first">
                            <template>
                                <el-table
                                        :data="groupDatas"
                                        border
                                        highlight-current-row
                                        @current-change="handleCurrentChange"
                                        height=""
                                        style="width: 100%">
                                    <el-table-column
                                            prop="name"
                                            label="用户组"
                                            width="100">
                                    </el-table-column>
                                    <el-table-column
                                            prop="type"
                                            label="说明"
                                            width="">
                                    </el-table-column>
                                </el-table>
                                <div class="page-box">
                                    <el-pagination
                                            layout="prev, pager, next"
                                            @current-change="currentPage"
                                            :total="50">
                                    </el-pagination>
                                </div>
                            </template>
                        </el-tab-pane>
                        <el-tab-pane label="用户同步" name="second"></el-tab-pane>
                    </el-tabs>
                </div>

            </div>
            <div class="tabs-lay" id="tabs">
                <div class="tool" id="tool">
                    <el-button type="primary" @click="add">新增</el-button>
                    <el-button @click="del" size="">删除</el-button>
                </div>
                <div class="from-box">

                    <el-form :model="form1" :inline="true"  class="demo-form-inline">
                        <el-form-item   label="分组编号：" :label-width="formLabelWidth">
                            <el-input v-model="form1.id"  auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item   label="分组名称：" :label-width="formLabelWidth">
                            <el-input v-model="form1.name" auto-complete="off"></el-input>
                        </el-form-item>
                            <el-form-item class="long-text"   label="分组说明：" :label-width="formLabelWidth">
                                <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="form1.type"  auto-complete="off"></el-input>
                            </el-form-item>
                        <el-form-item   label=" " :label-width="formLabelWidth">
                            <el-button type="primary" @click="batch">批量选择</el-button>
                        </el-form-item>
                        <div class="group-table center">
                            <el-table
                                    :data="form1.groupList"
                                    border
                                    center
                                    height="360"
                                    style="width: 100%">
                                <el-table-column
                                        label="序号"
                                        type="index"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="id"
                                        label="用户ID"
                                        width="">
                                </el-table-column>
                                <el-table-column
                                        prop="firstName"
                                        label="用户姓名"
                                        width="">
                                </el-table-column>
                                <el-table-column
                                        prop="email"
                                        label="邮箱"
                                        width="">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        width="120">
                                    <template scope="scope">
                                        <el-button
                                                @click.native.prevent="deleteRow(scope.$index, tableData4)"
                                                type="text"
                                                size="small">
                                            移除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="btn-box">
                            <el-form-item  :label-width="formLabelWidth">
                                <el-button type="primary" @click="save1"> 保 存 </el-button>
                                <el-button type="" > 取 消 </el-button>
                            </el-form-item>
                        </div>
                    </el-form>


                </div>

            </div>

        </div>
        <div class="foot-biu">
             四川新迎顺信息技术股份有限公司
        </div>
    </div>
</div>
<div id="dialog" class="group-d">

    <!--新增弹框-->
    <el-dialog title="批量选择" :visible.sync="batchFormVisible">
        <el-tree
                show-checkbox
                :data="data2"
                node-key="id"
                ref="tree"
                highlight-current
                :expand-on-click-node="false"
                @node-click="getKey"
                :props="defaultProps">
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSubmitForm">确 定</el-button>
        </div>
    </el-dialog>

</div>
<!-- 先引入 Vue -->
<script src="/businessProcessManager/js/ele/vue.js"></script>
<script src="/businessProcessManager/js/ele/vue-resource.js"></script>
<script src="/businessProcessManager/js/ele/vue-router.js"></script>
<!-- 引入组件库 -->
<script src="/businessProcessManager/js/ele/index.js"></script>
<script src="/businessProcessManager/js/jquery.min.js"></script>
<script src="/businessProcessManager/js/jquery.mCustomScrollbar.concat.min.js"></script>
<!--引入url配置文件-->
<script src="/businessProcessManager/js/config.js"></script>
<script>
//
    var menu = new Vue({
        el:'#menu',
        methods: {
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
    //    弹出框
    var dialog = new Vue({
        el: '#dialog',
        data:{
            formLabelWidth: '180px',
            batchFormVisible: false,
            batchForm: {
                code: "12",
                name: "",
                id: "",
                describe: "",
                classify: ""
            },
            formLabe2Width: '180px',
            data2: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            },{
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            },{
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            },{
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            },{
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            },{
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            },{
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        },
        methods: {
            getCheckedNodes:function() {
                console.log(this.$refs.tree.getCheckedNodes());
            },
            getCheckedKeys:function() {
                console.log(this.$refs.tree.getCheckedKeys());
            },
            setCheckedNodes:function() {
                this.$refs.tree.setCheckedNodes([{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 9,
                    label: '三级 1-1-1'
                }]);
            },
            getKey:function (data,node) {
                tool.delData = data.id
            },
            setCheckedKeys:function() {
                console.log(this.$refs.tree.getCheckedKeys());
            },
            resetChecked:function() {
                this.$refs.tree.setCheckedKeys([]);
            },

//          提交新增
            addSubmitForm:function () {
                var that =this;
                this.$confirm('确认选择吗？', '提示', {
                    type: 'warning'
                }).then(function () {
                    dialog.batchFormVisible = false;
                    console.log(that.$refs.tree.getCheckedNodes());
                })
            },


        }
    });

//    树形
var tree = new Vue({
    el: '#tree',
    data: {
        treeDatas:[],
        defaultProps: {
            label: 'NAME'
        },
    },
    methods: {
        getKey:function (data,node) {
            this.$http.get(url+portC+"actProcess/"+data.ID).then(function(data){

            },function(response){
                console.info(response);
                if(response){

                }
            })
            console.log(data);
        },
        loadNode:function(node,addNode){
            var pid;
            if(node.id==0){
                pid = "-1";
            }else{
                pid = node.data.ID;
            }
            this.$http.get(url+portC+"actProcess",{'pid':pid}).then(function(data){
                addNode(data.data);
            },function(response){
                console.info(response);
                if(response){

                }
            })
        }
    }
});
//    右侧表单
    var tabs = new Vue({
        el:'#tabs',
        data:{
            activeName: 'first',
            formLabelWidth:'180px',
            delData:'',
            form1: {
                id: "",
                name: "",
                type: "",
                groupList:[]
            }
        },
        methods:{
            handleClick:function(tab, event) {
                console.log(tab, event);
            },
            save1:function () {

                this.$confirm('确认提交吗？','提示',{
                    type:'warning'
                }).then(function () {
                    console.log(this.form1)
                }).catch(function () {
                    //取消
                })
            },
            add:function () {
                this.form1={
                    code: "",
                    name: "",
                    id: "",
                    describe: "",
                    classify: "",
                    groupList:[]};
            },
            del:function () {
                var that =this;
                if(this.delData!==''){
                    this.$confirm('确认删除id为'+this.delData+'的元素吗？', '提示', {
                        type: 'warning'
                    }).then(function () {
                        //删除 do something

                        that.form1 = {
                            code: "",
                            name: "",
                            id: "",
                            describe: "",
                            classify: "",
                            groupList:[]};
                    }).catch(function () {
                        //取消
                    })
                }else {
                    this.$message({
                        message: '请选择需要删除的内容！',
                        type: 'warning'
                    });
                }
            },
            batch:function () {
                dialog.batchFormVisible = true;
            }
        }
    });

//    中间分组表格
    var group = new Vue({
        el:'#group',
        data: {
        	activeName: 'first',
        	groupDatas:[],
            defaultProps: {
            	id:'id',
                name: 'name',
                type: 'type',
            }
        },
        created:function(){
            this.getGroup();
        },
        methods:{
            handleCurrentChange:function(val) {
                this.currentRow = val;
                this.$http.get(url+portP+"identity/users?memberOfGroup="+val.id).then(function(data){
                	tabs.form1 = Object.assign({},val);
                	tabs.form1.groupList=data.data.data;
                },function(response){
                    console.info(response);
                    if(response){

                    }
                })
                //tabs.form1 = Object.assign({},val);
                tabs.delData = val.id;
                console.log(tabs.delData)
            },
            currentPage:function (val) {
                console.log('当前第'+val+'页');
            },
            getGroup:function(){
                this.$http.get(url+portP+"identity/groups").then(function(data){
                	group.groupDatas=data.data.data;

                },function(response){
                    console.info(response);
                    if(response){

                    }
                })
            }
        }
    })
</script>
</body>
</html>
